<template>
	<view class="pages">
		<view class="top">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
				activeColor="#007aff" class="custom-segmented-control">
			</uni-segmented-control>
		</view>

		<view class="content">

			<!-- 今日 -->
			<view v-if="current === 0">
				<!-- 收入 -->
				<view class="number">
					<view class="left">
						<view>￥{{todayNum}}</view>
						<view>收入</view>
					</view>
					<view class="right">
						<view>{{todayOrderNum}}</view>
						<view>订单量</view>
					</view>
				</view>
				<!-- 饼图 -->
				<view class="income">收入分布</view>
				<view class="charts-box">
					<qiun-data-charts type="pie" :opts="opts1" :chartData="chartData1"
						style="width: 400px; height: 280px;" />

				</view>

				<!-- 柱状图 -->
				<view class="income">订单分布</view>
				<view class="charts-box">
					<qiun-data-charts type="mount" :opts="opts2" :chartData="chartData2" />
					
				</view>

			</view>

			<!-- 昨日 -->
			<view v-if="current === 1">
				<!-- 收入 -->
				<view class="number">
					<view class="left">
						<view>￥{{NotodayNum}}</view>
						<view>收入</view>
					</view>
					<view class="right">
						<view>{{NotodayOrderNum}}</view>
						<view>订单量</view>
					</view>
				</view>
				<view class="income">收入分布</view>
				<!-- 昨日饼图 -->
				<view class="charts-box">
					<qiun-data-charts type="pie" :opts="opts11" :chartData="chartData11"
						style="width: 400px; height: 280px;" />
				</view>



				<!-- 昨日柱状图 -->
				<view class="income">订单分布</view>
				<view></view>
				<view class="charts-box">
					<qiun-data-charts type="mount" :opts="opts22" :chartData="chartData22" />
				</view>
			</view>
		</view>

		<view class="cricle">

		</view>

		<view class="bar"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				items: ['今日', '昨日'],
				current: 0,

				//今日收入和订单量
				todayNum:'',
				todayOrderNum:'',
				
				//昨日收入和订单量
				NotodayNum:'',
				NotodayOrderNum:'',
				
				// 今日饼图
				chartData1: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts1: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 1,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				// 今日柱状图
				chartData2: {},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}],
					},
					extra: {
						mount: {
							type: "bar",
							widthRatio: 0.5,
							linearType: "opacity",
						}
					}
				},

				// 昨日饼图
				chartData11: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts11: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 1,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},

				// 昨日柱状图
				chartData22: {},
				opts22: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}],
					},
					extra: {
						mount: {
							type: "bar",
							widthRatio: 0.5,
							linearType: "opacity",
						}
					}
				},
				
				chart1:[],
				chart2:[],
				chart3:[],
				chart4:[]
			};
		},
		onLoad() {
			this.getService();
			this.getNumber2();
			// this.getNumber3();
			
			
			this.getServerData1();
			this.getServerData2();
			this.getServerData11();
			this.getServerData22();
			
			this.getTopNumber1();
			// this.getTopNumber2();
		},

		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					console.log("9999999999999")
					console.log(e)
					
					this.current = e.currentIndex;
				}
			},
			// 今日饼图
			getServerData1() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					series: [{
						data: this.chart1
					}]
				};
				this.chartData1 = JSON.parse(JSON.stringify(res));
				}, 1500);
			},

			// 今日柱状图
			getServerData2() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: this.chart2
						}]
					};
					this.chartData2 = JSON.parse(JSON.stringify(res));
				}, 1500);
			},

			// 昨日饼图
			getServerData11() {
				
				console.log()
				
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data:  this.chart3
						}]
					};
					this.chartData11 = JSON.parse(JSON.stringify(res));

				}, 1500);
			},
			// 昨日柱状图
			getServerData22() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: this.chart4
						}]
					};
					this.chartData22 = JSON.parse(JSON.stringify(res));
				}, 1500);
			},
			
			//获取今日的收入、订单量情况
			getTopNumber1(){
				// 获取token
				var token = uni.getStorageSync('Token');
				
				// 获取当前日期
				let today = new Date();  
							  
				// 分别获取年、月、日  
				let year = today.getFullYear(); // 获取完整的年份(4位,1970-????)  
				let month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的，所以要加1，并使用padStart补全为两位数  
				let day = today.getDate().toString().padStart(2, '0'); // 获取当前月份的日期  
							  
				// 将年、月、日拼接成YYYY-MM-DD的格式  
				console.log(`${year}-${month}-${day}` ); 
				// 获取登录店铺的id和今日的日期
				var id =uni.getStorageSync('UserInfo').id;
				
				var data = `${year}-${month}-${day}` ;

				uni.request({
					 url: `http://localhost:7001/ruoyi-merchant/order/count1`,
					    method: 'GET',
						data: {
							'mid': 6,
							'useTime': data
						},
					    header: {
					        'Authorization': 'Bearer ' + token
					    },
					success: (res) => {
						if (res.statusCode === 200) {
							console.log("res1...............................");
							console.log(res.data.data);  
							this.todayNum = res.data.data.total;
							this.todayOrderNum = res.data.data.orderNum;
							
							
						} else {
							reject(`Failed to fetch details. Status code: ${res.statusCode}`);
						}
					},
					fail: (err) => {
						reject(`Request failed: ${err.errMsg}`);
					}
				});
			},
			//获取昨日的收入、订单量情况
			getTopNumber2(){
				// 获取token
				var token = uni.getStorageSync('Token');
				
				// 获取当前日期
				let today = new Date();  
				// 从当前时间戳中减去一天的毫秒数 ,获取昨天日期
				let yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000); 
							  
				// 分别获取年、月、日  
				let year = yesterday.getFullYear(); // 获取完整的年份(4位,1970-????)  
				let month = (yesterday.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的，所以要加1，并使用padStart补全为两位数  
				let day = yesterday.getDate().toString().padStart(2, '0'); // 获取当前月份的日期  
							  
				// 将年、月、日拼接成YYYY-MM-DD的格式  
				console.log(`${year}-${month}-${day}` ); 
				// 获取登录店铺的id和今日的日期
				var id =uni.getStorageSync('UserInfo').id;
				
				var data = `${year}-${month}-${day}` ;
			
				uni.request({
					 url: `http://localhost:7001/ruoyi-merchant/order/count1`,
					    method: 'GET',
						data: {
							'mid': 6,
							'useTime': data
						},
					    header: {
					        'Authorization': 'Bearer ' + token
					    },
					success: (res) => {
						if (res.statusCode === 200) {
							console.log("res1...............................");
							console.log(res.data.data);  
							this.NotodayNum = res.data.data.total;
							this.NotodayOrderNum = res.data.data.orderNum;
							
							
						} else {
							reject(`Failed to fetch details. Status code: ${res.statusCode}`);
						}
					},
					fail: (err) => {
						reject(`Request failed: ${err.errMsg}`);
					}
				});
			},
			
			
		//获取今日的收入分布、订单量分布
		getNumber2(){
			// 获取token
			var token = uni.getStorageSync('Token');
			
			// 获取当前日期
			let today = new Date();  
						  
			// 分别获取年、月、日  
			let year = today.getFullYear(); // 获取完整的年份(4位,1970-????)  
			let month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的，所以要加1，并使用padStart补全为两位数  
			let day = today.getDate().toString().padStart(2, '0'); // 获取当前月份的日期  
						  
			// 将年、月、日拼接成YYYY-MM-DD的格式  
			`${year}-${month}-${day}` 
			// 获取登录店铺的id和今日的日期
			var id =uni.getStorageSync('UserInfo').id;
			console.log(`${year}-${month}-${day}` );
			var data = `${year}-${month}-${day}` ;
		
			uni.request({
				 url: `http://localhost:7001/ruoyi-merchant/order/count2`,
				    method: 'GET',
					data: {
						'mid': 6,
						'useTime': data
					},
				    header: {
				        'Authorization': 'Bearer ' + token
				    },
				success: (res) => {
					if (res.statusCode === 200) {
						console.log("饼图柱状图的数据...............................");
						console.log(res.data.data); 
						// 将返回的数据为一个数组，以便更容易地按顺序访问
						 const dataArray = Object.values(res.data.data);
						 
						 if(dataArray != null){
							 // 将数据完善今日饼图数据
							 const updatedChart1 = this.chart1.map((item, index) => {  
							  const { typePrice } = dataArray[index]; // 获取对应的 typePrice
							   return {  
							           ...item, // 复制原始对象的所有属性  
							           "value": typePrice,  
							           "labelText": `${item.name}:${typePrice.toFixed(2)}元` // 使用 toFixed 来格式化数字  
							       };  
							   }); 
							  // 创建的新数组赋值给饼图数据
							   this.chart1 = updatedChart1;		
							 							   
							 							   
							 							// 将数据完善今日柱状图数据
							 							const updatedChart2 = this.chart2.map((item, index) => {  
							 							 const { typeNum } = dataArray[index]; // 获取对应的 typeNum
							 							  return {  
							 							          ...item, // 复制原始对象的所有属性  
							 							          "value": typeNum 
							 							      };  
							 							  }); 
							 							  // 创建的新数组赋值给饼图数据
							 							  this.chart2 = updatedChart2;
						 }
						    
						
					} else {
						reject(`Failed to fetch details. Status code: ${res.statusCode}`);
					}
				},
				fail: (err) => {
					reject(`Request failed: ${err.errMsg}`);
				}
			});
		},
		
		//获取昨日的收入分布、订单量分布
		getNumber3(){
			// 获取token
			var token = uni.getStorageSync('Token');
			
			// 获取当前日期
			let today = new Date();
			  // 从当前时间戳中减去一天的毫秒数 ,获取昨天日期
			  let yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
						  
			// 分别获取年、月、日  
			let year = yesterday.getFullYear(); // 获取完整的年份(4位,1970-????)  
			let month = (yesterday.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的，所以要加1，并使用padStart补全为两位数  
			let day = yesterday.getDate().toString().padStart(2, '0'); // 获取当前月份的日期  
						  
			// 将年、月、日拼接成YYYY-MM-DD的格式  
			`${year}-${month}-${day}` 
			// 获取登录店铺的id和今日的日期
			var id =uni.getStorageSync('UserInfo').id;
			console.log(`${year}-${month}-${day}` );
			var data = `${year}-${month}-${day}` ;
		
			uni.request({
				 url: `http://localhost:7001/ruoyi-merchant/order/count2`,
				    method: 'GET',
					data: {
						'mid': 6,
						'useTime': data
					},
				    header: {
				        'Authorization': 'Bearer ' + token
				    },
				success: (res) => {
					if (res.statusCode === 200) {
						console.log("res2...............................");
						console.log(res.data.data); 
						// 将返回的数据为一个数组，以便更容易地按顺序访问
						 const dataArray = Object.values(res.data.data);
						 
						 // 将数据完善今日饼图数据
						 const updatedChart3 = this.chart3.map((item, index) => {  
						  const { typePrice } = dataArray[index]; // 获取对应的 typePrice
						   return {  
						           ...item, // 复制原始对象的所有属性  
						           "value": typePrice,  
						           "labelText": `${item.name}:${typePrice.toFixed(2)}元` // 使用 toFixed 来格式化数字  
						       };  
						   }); 
						  // 创建的新数组赋值给饼图数据
						   this.chart3 = updatedChart3;		
							   
							   
							// 将数据完善今日柱状图数据
							const updatedChart4 = this.chart4.map((item, index) => {  
							 const { typeNum } = dataArray[index]; // 获取对应的 typeNum
							  return {  
							          ...item, // 复制原始对象的所有属性  
							          "value": typeNum 
							      };  
							  }); 
							  // 创建的新数组赋值给饼图数据
							  this.chart4 = updatedChart4;   
						
					} else {
						reject(`Failed to fetch details. Status code: ${res.statusCode}`);
					}
				},
				fail: (err) => {
					reject(`Request failed: ${err.errMsg}`);
				}
			});
		},
		
		
		// 获取服务类型
		getService(){
			console.log("获取服务类型");
			// 获取token
			var token = uni.getStorageSync('Token');
			uni.request({
				url: `http://localhost:7001/ruoyi-merchant/type/list`,
				method: 'GET',
				header: {
					'Authorization': 'Bearer ' + token
				},
				success: (res) => {
					if (res.statusCode === 200) {
						console.log("服务...............................");
						console.log(res.data.rows);
						if(res.data.rows != null){
							// 将服务传递给今日饼图
							this.chart1 = res.data.rows.map(item =>({
								"name": item.name,
							}));
							// 将服务传递给今日柱状图
							this.chart2 = res.data.rows.map(item =>({
								"name": item.name,
							}));
						}
						
						
						// // 将服务传递给昨日饼图
						// this.chart3 = res.data.rows.map(item =>({
						// 	"name": item.name,
						// }));
						// // 将服务传递给昨日柱状图
						// this.chart4 = res.data.rows.map(item =>({
						// 	"name": item.name,
						// }));
						
						
					} else {
						reject(`Failed to fetch details. Status code: ${res.statusCode}`);
					}
				},
				fail: (err) => {
					reject(`Request failed: ${err.errMsg}`);
				}
			});

		},

			
			
		}
	};
</script>
<style>
	.pages {
		width: 375px;
		height: 812px;
		background-color: rgba(255, 255, 255, 1);
	}

	.top {
		padding: 34px 0 0 0;
	}

	.segmented-control {
		/* margin-top: 34px; */
		width: 160px;
		height: 35px;
		margin-left: 102px;
	}

	.number {
		display: flex;
	}

	.left {
		width: 187px;
		height: 91px;
		line-height: 20px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		font-family: Roboto;
		border: 0px solid rgba(187, 187, 187, 1);
	}

	.left view:nth-child(1) {
		margin-left: 55px;
		margin-top: 25px;
		width: 109px;
		height: 27px;
		line-height: 25px;
		color: rgba(29, 111, 255, 1);
		font-size: 18px;
		text-align: left;
		font-family: SourceHanSansSC-medium;
	}

	.left view:nth-child(2) {
		margin-left: 95px;
		width: 28px;
		height: 20px;
		line-height: 20px;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.right {
		width: 187px;
		height: 91px;
		line-height: 20px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		font-family: Roboto;
		border: 0px solid rgba(187, 187, 187, 1);
	}

	.right view:nth-child(1) {
		margin-top: 25px;
		margin-left: 70px;
		width: 43px;
		height: 27px;
		line-height: 25px;
		color: rgba(84, 188, 189, 1);
		font-size: 18px;
		text-align: left;
		font-family: SourceHanSansSC-medium;
	}

	.right view:nth-child(2) {
		margin-left: 70px;
		width: 42px;
		height: 20px;
		line-height: 20px;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.income {
		margin-left: 25px;
		margin-top: 15px;
		width: 64px;
		height: 23px;
		line-height: 23px;
		color: rgba(16, 16, 16, 1);
		font-size: 16px;
		text-align: left;
		font-family: PingFangSC-semiBold;
	}

	.charts-box {
		margin-top: -10px;
		margin-left: 0px;
	}

	.charts-box {
		margin-top: 10px;
		width: 100%;
		height: 300px;
	}
</style>